<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
    <div  th:fragment="sidebar">
        <el-collapse v-model="activeName" accordion style="width: 250px">
            <el-collapse-item title="搜索文章 SearchTheArticle" name="1">
                <el-input v-model="condition" placeholder="请输入文章关键字">
                <el-button icon="el-icon-search" @click.native="searchBlog()" slot="append"></el-button>
                </el-input>
            </el-collapse-item>
            <el-collapse-item title="博客热度排行榜 Consistency" name="2">
                <template v-for="(blog,key,ind) in topblog" >
                    <div style="height: 85px;cursor:pointer" @click="showContext(blog.id)">
                        <template v-if="key==0">
                            <el-tag v-if>{{key+1}}</el-tag>
                        </template>
                        <template v-else-if="key==1">
                            <el-tag type="success">{{key+1}}</el-tag>
                        </template>
                        <template v-else-if="key==2">
                            <el-tag type="warning">{{key+1}}</el-tag>
                        </template>
                        <template v-else>
                            <el-tag type="info">{{key+1}}</el-tag>
                        </template>
                        <span>{{blog.title}}</span>
                        <br>
                        <div style="height: 40px;margin-top: 5px;">
                            <el-tag type="danger">阅读量:{{blog.readvolume}}</el-tag>
                            &nbsp;&nbsp;
                            <el-tag> 作者 : {{blog.author}}</el-tag>
                        </div>
                        <hr>
                    </div>
                </template>
            </el-collapse-item>
        </el-collapse>
    </div>
</body>

</html>